import React, { Component } from 'react';
import JsBarcode from 'jsbarcode';
import { connect } from 'dva';
import moment from 'moment';
import ReactToPrint from 'react-to-print';
import QRCode from 'qrcode.react';
import { allDictList } from '@/utils/constans';
import hic from '@/assets/hic.png';
import { queryDict, formatPrice } from '@/utils/common';
import AdButton from '@/components/AdButton';
import { allDispatchType, renderTableAdSelect } from './utils';
import styles from './Bill.less';

@connect(({ component }) => ({
  dictObject: component.dictObject,
}))
export default class BillPrint extends Component {
  state = {
    time: new Date(),
    detail: {},
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const allDict = [allDictList.payCompany, allDictList.currencyType];
    queryDict({ props: this.props, allDict });

    this.timer = setInterval(() => {
      this.setState({ time: new Date() });
    }, 1000);
    const {
      match: { params },
    } = this.props;
    if (!params || !params.id) return;
    dispatch({
      type: allDispatchType.detail,
      payload: { id: params.id },
      callback: data => {
        if (!data) return;
        let rushed =
          data.rushedJson && JSON.parse(data.rushedJson) ? JSON.parse(data.rushedJson) : {};
        let _offsetAmount = 0;
        rushed = rushed.rushedListVOS || [];
        rushed.length > 0 &&
          rushed.map(r => {
            _offsetAmount = _offsetAmount + Number(r.offsetAmount);
          });
        data.offsetAmount = _offsetAmount;
        data.realPayable = Number(data.realPayable) - _offsetAmount;
        this.setState({ detail: data }, () => {
          this.toJsBarcode();
        });
      },
    });
  }

  componentWillUnmount() {
    if (this.timer != null) {
      clearInterval(this.timer);
    }
  }

  toJsBarcode() {
    const {
      detail: { barcode },
      detail,
    } = this.state;
    // 调用 JsBarcode方法生成条形码
    JsBarcode(this.barcode, barcode || ' ', {
      text: barcode || ' ',
      displayValue: true,
      width: 1.0,
      height: 50,
      margin: 5,
      fontSize: 12,
    });
  }

  render() {
    const {
      time,
      detail: {
        payCompany,
        realCurrencyType,
        reasons,
        realPayable,
        barcode,
        oaNo,
        relationObj,
        commitTime,
        payable,
        offsetAmount,
      },
    } = this.state;
    const userName = JSON.parse(localStorage.getItem('user')).sysName;
    return (
      <div className={styles.customPrint}>
        <div className={styles.reactToPrint}>
          <ReactToPrint
            trigger={() => <AdButton text="打印" type="primary" />}
            content={() => this.refs}
          />
        </div>
        <div className={styles.printTable} ref={el => (this.refs = el)}>
          <div style={{ paddingBottom: 10 }}>
            打印人:{userName} 打印时间:
            {moment(time).format('YYYY-MM-DD HH:mm:ss')} 打印来源:Hibase
          </div>
          <table width="100%">
            <tbody>
              <tr>
                <td colSpan="4">
                  <img src={hic} height="70" />
                </td>
              </tr>
              <tr>
                <td colSpan="4" align="center" style={{ fontSize: 22 }}>
                  日常费用报销申请单
                </td>
              </tr>
              <tr height="100">
                <td colSpan="4" align="center">
                  <div style={{ position: 'relative' }}>
                    <svg
                      ref={ref => {
                        this.barcode = ref;
                      }}
                    />
                    {/* <div style={{ position: 'absolute', top: 0, right: 30, marginTop: 10 }}>
                      <QRCode value={barcode || ' '} size={50} fgColor="#000000" />
                    </div> */}
                  </div>
                </td>
              </tr>
              <tr>
                <td className={styles.normalTitle} style={{ width: 122 }} align="center">
                  报销单号
                </td>
                <td>{oaNo}</td>
                <td className={styles.normalTitle} style={{ width: 122 }} align="center">
                  申请时间
                </td>
                <td>{commitTime ? moment(commitTime).format('YYYY-MM-DD') : null}</td>
              </tr>
              <tr>
                <td className={styles.normalTitle} align="center">
                  填单人
                </td>
                <td>{userName}</td>
                <td className={styles.normalTitle} align="center">
                  申请部门
                </td>
                <td></td>
              </tr>
              <tr>
                <td className={styles.normalTitle} align="center">
                  报销人
                </td>
                <td>{userName}</td>
                <td className={styles.normalTitle} align="center">
                  报销人部门
                </td>
                <td></td>
              </tr>
              <tr>
                <td className={styles.normalTitle} align="center">
                  支付公司
                </td>
                <td colSpan="3">
                  {renderTableAdSelect({
                    props: this.props,
                    value: payCompany,
                    key: allDictList.payCompany,
                  })}
                </td>
              </tr>
              <tr>
                <td className={styles.normalTitle} align="center">
                  收款人
                </td>
                <td colSpan="3">{relationObj}</td>
              </tr>
              <tr>
                <td className={styles.normalTitle} align="center">
                  报销金额
                </td>
                <td>{formatPrice(payable)}</td>
                <td className={styles.normalTitle} align="center">
                  借款冲抵金额
                </td>
                <td>{formatPrice(offsetAmount)}</td>
              </tr>
              <tr>
                <td className={styles.normalTitle} align="center">
                  实付金额
                </td>
                <td>{realPayable ? formatPrice(realPayable) : 0}</td>
                <td className={styles.normalTitle} align="center">
                  付款币种
                </td>
                <td>
                  {renderTableAdSelect({
                    props: this.props,
                    value: realCurrencyType,
                    key: allDictList.currencyType,
                  })}
                </td>
              </tr>
              <tr height="97">
                <td className={styles.normalTitle} align="center">
                  事由
                </td>
                <td colSpan="3">{reasons}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}
